<template>
  <div>
    <div id='formio'></div>
  </div>
</template>

<script setup lang="ts">
import { Formio } from 'formiojs';
import 'formiojs/dist/formio.form.min.css'
import { onMounted } from "vue";

onMounted(() => {
  const ele = document.getElementById('formio')
  if (ele) {
    Formio.createForm(ele, {
      components: [
        {
          type: 'textfield',
          key: 'firstName',
          label: 'First Name',
          placeholder: 'Enter your first name.',
          input: true,
          tooltip: 'Enter your <strong>First Name</strong>',
          description: 'Enter your <strong>First Name</strong>'
        },
        {
          type: 'textfield',
          key: 'lastName',
          label: 'Last Name',
          placeholder: 'Enter your last name',
          input: true,
          tooltip: 'Enter your <strong>Last Name</strong>',
          description: 'Enter your <strong>Last Name</strong>'
        },
        {
          type: "select",
          label: "Favorite Things",
          key: "favoriteThings",
          placeholder: "These are a few of your favorite things...",
          data: {
            values: [
              {
                value: "raindropsOnRoses",
                label: "Raindrops on roses"
              },
              {
                value: "whiskersOnKittens",
                label: "Whiskers on Kittens"
              },
              {
                value: "brightCopperKettles",
                label: "Bright Copper Kettles"
              },
              {
                value: "warmWoolenMittens",
                label: "Warm Woolen Mittens"
              }
            ]
          },
          dataSrc: "values",
          template: "<span>{{ item.label }}</span>",
          multiple: true,
          input: true
        },
        {
          type: 'button',
          action: 'submit',
          label: 'Submit',
          theme: 'primary'
        }
      ]
    }, {
      readOnly: true,
      renderMode: 'form'
    }).then(function (form) {
      // Defaults are provided as follows.
      form.submission = {
        data: {
          firstName: 'Joe',
          lastName: 'Smith'
        }
      };

      // Register for the submit event to get the completed submission.
      form.on('submit', function (submission: any) {
        console.log('Submission was made!', submission);
      });

      // Everytime the form changes, this will fire.
      form.on('change', function (changed: any) {
        console.log('Form was changed', changed);
      });
    });
  }
})
</script>

<style scoped>
#formio {
  padding: 20px;
}
</style>